﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="/deng/view/workflow/form-design/Scripts/jquery-1.12.4.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=9,IE=10,IE=11,IE=EDGE" />
    <link href="/deng/view/workflow/form-design/Scripts/jQuery-contextMenu-master/dist/jquery.contextMenu.min.css" rel="stylesheet" />
    <script src="/deng/view/workflow/form-design/Scripts/jQuery-contextMenu-master/dist/jquery.contextMenu.min.js"></script>
    <script src="/deng/view/workflow/form-design/Scripts/jQuery-contextMenu-master/dist/jquery.ui.position.min.js"></script>
   <!--
   <link href="/deng/view/workflow/form-design/Scripts/jquery-easyui-1.5.1/themes/default/easyui.css" rel="stylesheet" />
    <link href="/deng/view/workflow/form-design/Scripts/jquery-easyui-1.5.1/themes/icon.css" rel="stylesheet" />
    <link href="/deng/view/workflow/form-design/Scripts/jquery-easyui-1.5.1/themes/color.css" rel="stylesheet" />
    -->
    <script src="/deng/view/workflow/form-design/Scripts/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
    <script src="/deng/view/workflow/form-design/Scripts/jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script>
    <script src="/deng/view/workflow/form-design/Scripts/jquery-validation-1.15.0/dist/jquery.validate.min.js"></script>
    <script src="/deng/view/workflow/form-design/Scripts/jquery-validation-1.15.0/dist/localization/messages_zh.min.js"></script>


    <script src="/deng/editor/codemirroreditor/js/codemirror-5.2/lib/codemirror.js"></script>
    <link rel="stylesheet"href="/deng/editor/codemirroreditor/js/codemirror-5.2/lib/codemirror.css" />
    <!--
    <link rel=stylesheet href="/deng/editor/codemirroreditor/js/codemirror-5.2/doc/docs.css">
    -->
    <link rel="stylesheet" href="/deng/editor/codemirroreditor/js/codemirror-5.2/addon/hint/show-hint.css">
    <script src="/deng/editor/codemirroreditor/js/codemirror-5.2/addon/hint/show-hint.js"></script>
    <script src="/deng/editor/codemirroreditor/js/codemirror-5.2/addon/hint/xml-hint.js"></script>
    <script src="/deng/editor/codemirroreditor/js/codemirror-5.2/addon/hint/html-hint.js"></script>
    <script src="/deng/editor/codemirroreditor/js/codemirror-5.2/mode/xml/xml.js"></script>
    <script src="/deng/editor/codemirroreditor/js/codemirror-5.2/mode/javascript/javascript.js"></script>
    <script src="/deng/editor/codemirroreditor/js/codemirror-5.2/mode/css/css.js"></script>
    <script src="/deng/editor/codemirroreditor/js/codemirror-5.2/mode/htmlmixed/htmlmixed.js"></script>
    <script src="/deng/editor/codemirroreditor/js/codemirror-5.2/util/formatting.js"></script>



    <link href="/deng/source/plugins/newAdmin/vendors/v5.5.5/vendors/fontawesome5/css/fontawesome.css" rel="stylesheet" />
    <link href="/deng/source/plugins/newAdmin/bootstrap/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <link href="/deng/source/plugins/newAdmin/vendors/v5.5.5/vendors/flaticon/css/flaticon.css" rel="stylesheet" />
    <link href="/deng/source/plugins/newAdmin/vendors/v5.5.5/socicon/css/socicon.css" rel="stylesheet" />
    <link href="/deng/source/plugins/newAdmin/vendors/v5.5.5/vendors/line-awesome/css/line-awesome.css" rel="stylesheet" />
    <link href="/deng/source/plugins/newAdmin/bootstrap/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" />
    <link href="/deng/source/plugins/newAdmin/bootstrap/4.0.0/css/icons.css" rel="stylesheet" />
    <link href="/deng/source/plugins/newAdmin/bootstrap/4.0.0/css/style.css" rel="stylesheet" />
    <link href="/deng/source/plugins/newAdmin/bootstrap/4.0.0/css/style.css" rel="stylesheet" />
    <link href="/deng/source/plugins/newAdmin/using/base/theme/default/style.bundle.css" rel="stylesheet" />
    <!-- 提示插件开始 -->
    <script src="/deng/source/plugins/newAdmin/bootstrap/bootstrap-toastr/toastr.min.js" type="text/javascript"></script>
    <script src="/deng/source/plugins/newAdmin/bootstrap/bootbox.js" type="text/javascript"></script>
    <script src="/deng/source/plugins/newAdmin/bootstrap/bootstrap-validate/bootstrapValidator.js" type="text/javascript"></script>
    <script src="/deng/source/plugins/newAdmin/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="/deng/source/plugins/newAdmin/using/base/theme/default/scripts.bundle.js"></script>
    <script src="/deng/view/workflow/form-design/Content/DataCommon.js"></script>
    <script src="/deng/source/js/base.js" type="text/javascript" ></script>
    <script src="/deng/source/js/boot.min.js" type="text/javascript" ></script>
    <title>欢迎使用表单设计器</title>
    <style>
        html, body {
            margin: 0;
            padding: 5px;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        .min, #mainContent {
            min-height: 400px;
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            padding: 40px;
            box-sizing: border-box;
        }
        .tdSelected {
            background-color: powderblue;
        }
        table {
            overflow: auto;
        }
        /*th {
            text-align: center;
            border: 1px solid #c8c8c8;
            width: 350px;
            height: 40px;
        }*/

        .desigerTable {
        }
        .desigerTable th {
            text-align: center;
            border: 1px solid #c8c8c8;
            width: 350px;
            height: 40px;
            font-family: 'Microsoft YaHei UI';
            font-size: 18px;
        }
        .protable {
            font-size: 10px;
            font-family: 'Microsoft YaHei UI';
            color: black;
        }
        #filed label.error, #formNew label.error, #tabitemform1 label.error, #tabitemform label.error, #itemform label.error, #formtablepors label.error {
            color: red;
        }
        .eleHover {
            background-color: #7ca09f;
        }

        .modal-lg {
            max-width: 85%;
            width: 85%;
            max-width: none;
        }
        .context-menu-list{
            width:316px;
            background: turquoise;
        }
        .context-menu-item{
            background: turquoise;
            color:#FFF;
            /*padding-top:5px;*/
        }
        .context-menu-item.context-menu-hover{
            background: #5A5CAD;
        }
        /*滚动条整体部分,必须要设置*/
        ::-webkit-scrollbar{
            width: 6px;
            height: 6px;
            background-color: #fff;
        }
        /*滚动条的轨道*/
        ::-webkit-scrollbar-track{
            box-shadow: inset 0 0 0px rgba(0,0,0,.3);
            background-color: #fff;
        }
        /*滚动条的滑块按钮*/
        ::-webkit-scrollbar-thumb{
            border-radius: 10px;
            background-color: #e0e0e0;
            box-shadow: inset 0 0 0px #000;
        }
        /*滚动条的上下两端的按钮*/
        ::-webkit-scrollbar-button{
            height: 6px;
            background-color: #fff;
        }
        html {
            /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
            -ms-overflow-style:none;
            /*火狐下隐藏滚动条*/
            overflow:-moz-scrollbars-none;
        }
        /*Chrome下隐藏滚动条，溢出可以透明滚动*/
        html::-webkit-scrollbar{width:0px}
    </style>
</head>
<body>
    <div class="panel" style="margin-bottom: 10px;">
        <div class="m-portlet__body">
            <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                <div class="m-form__actions m-form__actions--solid">
                    <div class="form-group m-form__group row">
                        <div class="col m--align-left">
                            <div class="form-group m-form__group row">
                                <label class="col-md-2 col-form-label">表单容器</label>
                                <div class="col-md-2">
                                    <select id="Select1" class=" form-control"></select>
                                </div>
                                <div class="col-md-8">
                                    <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-success" id="Button1">
                                        <span class="fa fa-check-square-o" aria-hidden="true">保 存</span>
                                    </button>
                                    <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-danger" id="deleteContainer">
                                        <span class="fa fa-trash-o" aria-hidden="true">删 除</span>
                                    </button>
                                    <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-primary" id="editContainer">
                                        <span class="fa fa-pencil-square-o" aria-hidden="true">编 辑</span>
                                    </button>
                                    <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-metal" id="btnLoadContent">
                                        <span class="fa fa-gears" aria-hidden="true">加载默认</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col m--align-right">
                            <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-accent m-btn--bolder m-btn--uppercase" onclick="formAttrEdit()">
                                <span class="fa fa-pencil" aria-hidden="true">编辑属性</span>
                            </button>
                            <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-warning m-btn--bolder m-btn--uppercase" onclick="codingShow()">
                                <span class="fa fa-share-square-o" aria-hidden="true">源代码</span>
                            </button>
                            <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-metal" onclick="preview()">
                                <span class="fa fa-wpexplorer" aria-hidden="true">预 览</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="main" class="row">
            <div class="col-md-3">
                <div class="m-portlet m-portlet--full-height">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                   表单控件
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                        <!--begin::Section-->
                        <div class="m-accordion m-accordion--default m-accordion--solid m-accordion--section m-accordion--padding-lg" id="m_accordion_8" role="tablist">
                            <!--begin::Item-->
                            <div class="m-accordion__item">
                                <div class="m-accordion__item-head collapsed" role="tab" id="m_accordion_8_item_1_head" data-toggle="collapse" href="#m_accordion_8_item_1_body" aria-expanded="    false">
                                    <span class="m-accordion__item-icon">
                                        <i class="fa flaticon-user-ok"></i>
                                    </span>
                                    <span class="m-accordion__item-title">
                                       基本控件
                                    </span>
                                    <span class="m-accordion__item-mode"></span>
                                </div>
                                <div class="m-accordion__item-body collapse" id="m_accordion_8_item_1_body" role="tabpanel" aria-labelledby="m_accordion_8_item_1_head" data-parent="#m_accordion_8">
                                    <div class="m-accordion__item-content" style="text-align: left;">
                                        <div nttype="text" class="btn btn-secondary m-btn m-btn--custom dragitem"><!-- style="background-color: #c8c8c8"-->
                                            <span class=" fa fa-edit" aria-hidden="true"></span>文本输入
                                        </div>
                                        <div nttype="password" class="btn btn-secondary m-btn m-btn--custom dragitem">
                                            <span class="fa fa-snowflake-o" aria-hidden="true"></span>密码控件
                                        </div>
                                        <div nttype="select" class="btn btn-secondary m-btn m-btn--custom dragitem">
                                            <span class="fa fa-angle-down" aria-hidden="true"></span>  下拉列表
                                        </div>
                                        <div nttype="checkbox" class="btn btn-secondary m-btn m-btn--custom dragitem">
                                            <span class="fa fa-check-square-o" aria-hidden="true"></span>选择控件
                                        </div>
                                        <div nttype="radio" class="btn btn-secondary m-btn m-btn--custom dragitem">
                                            <span class="fa fa-stop-circle" aria-hidden="true"></span>单选控件
                                        </div>
                                        <div nttype="file" class="btn btn-secondary m-btn m-btn--custom dragitem">
                                            <span class="fa fa-unlink" aria-hidden="true"></span>文件上传
                                        </div>
                                        <div nttype="textarea" class="btn btn-secondary m-btn m-btn--custom dragitem">
                                            <span class="fa fa-file-o" aria-hidden="true"></span>文本区域
                                        </div>
                                        <div nttype="table" class="btn btn-secondary m-btn m-btn--custom dragitem">
                                            <span class="fa fa-table" aria-hidden="true"></span>表格控件
                                        </div>
                                        <div nttype="datetime" class="  btn btn-secondary m-btn m-btn--custom dragitem">
                                            <span class=" fa fa-calendar" aria-hidden="true"></span>时间控件
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--end::Item-->
                            <!--begin::Item-->
                            <div class="m-accordion__item">
                                <div class="m-accordion__item-head collapsed" role="tab" id="m_accordion_8_item_2_head" data-toggle="collapse" href="#m_accordion_8_item_2_body" aria-expanded="    false">
                                    <span class="m-accordion__item-icon">
                                        <i class="fa  flaticon-placeholder"></i>
                                    </span>
                                    <span class="m-accordion__item-title">
                                       按钮控件
                                    </span>
                                    <span class="m-accordion__item-mode"></span>
                                </div>
                                <div class="m-accordion__item-body collapse" id="m_accordion_8_item_2_body" role="tabpanel" aria-labelledby="m_accordion_8_item_2_head" data-parent="#m_accordion_8">
                                    <div class="m-accordion__item-content">
                                        <div nttype="submit" class="btn btn-secondary m-btn m-btn--custom dragitem">
                                            <span class="fa fa-save" aria-hidden="true"></span>提交按钮
                                        </div>
                                        <div nttype="reset" class="  btn btn-secondary m-btn m-btn--custom dragitem">
                                            <span class=" fa fa-rotate-left" aria-hidden="true"></span>重置按钮
                                        </div>
                                        <div nttype="deliver" class="  btn btn-secondary m-btn m-btn--custom dragitem">
                                            <span class="fa fa-user-plus" aria-hidden="true"></span>转派按钮
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--end::Item-->
                            <!--begin::Item-->
                            <div class="m-accordion__item">
                                <div class="m-accordion__item-head collapsed" role="tab" id="m_accordion_8_item_3_head" data-toggle="collapse" href="#m_accordion_8_item_3_body" aria-expanded="    false">
                                    <span class="m-accordion__item-icon">
                                        <i class="fa  flaticon-alert-2"></i>
                                    </span>
                                    <span class="m-accordion__item-title">
                                        容器控件
                                    </span>
                                    <span class="m-accordion__item-mode"></span>
                                </div>
                                <div class="m-accordion__item-body collapse" id="m_accordion_8_item_3_body" role="tabpanel" aria-labelledby="m_accordion_8_item_3_head" data-parent="#m_accordion_8">
                                    <div class="m-accordion__item-content">
                                        <div nttype="detabs" class="  btn btn-secondary m-btn m-btn--custom dragitem">
                                            <span class=" fa fa-tasks" aria-hidden="true"></span>选项卡控件
                                        </div>
                                        <div nttype="decolls" class="  btn btn-secondary m-btn m-btn--custom dragitem">
                                            <span class=" fa fa-navicon" aria-hidden="true"></span>手风琴控件
                                        </div>
                                        <div nttype="detables" class="  btn btn-secondary m-btn m-btn--custom dragitem">
                                            <span class="fa fa-table" aria-hidden="true"></span>表格设计器
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--end::Item-->
                        </div>
                        <!--end::Section-->
                    </div>
                </div>
            </div>
            <div class="col-md-9">
                <div class="m-portlet">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    表单布局
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                        <div tcount="0" class="panel-body" style="overflow: auto; min-height: 400px" id="mainContent" runat="server"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 合并单元格模态框（Modal）开始 -->
        <div class="modal fade" id="hbdygModal" tabindex="-1" role="dialog" aria-labelledby="hbdygModalLabel" aria-hidden="true">
            <div class="modal-dialog" id="hbdygModalDialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="hbdygModalLabel">
                            合并单元格
                        </h4>
                    </div>
                    <div class="modal-body">
                        <form class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed" id="fm" method="post">
                            <div class="m-portlet__body">
                                <div class="form-group m-form__group row">
                                    <label class="col-lg-1 col-form-label">左</label>
                                    <div class="col-lg-3">
                                        <input name="zuo" id="zuo" class="form-control" required="true" validType="number" label="左" style="width:100%">                                </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <label class="col-lg-1 col-form-label">右</label>
                                    <div class="col-lg-3">
                                        <input name="you" id="you" class="form-control" required="true" validType="number" label="右" style="width:100%">
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success m-btn m-btn--custom m-btn--bolder m-btn--uppercase" onclick="execHb()">合 并</button>
                        <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--icon" data-dismiss="modal">关 闭</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
        <!-- 合并单元格模态框（Modal）结束 -->

        <style type="text/css">
            .title {
                margin-bottom: 10px;
            }
            .dragitem {
            }
            .targetarea {
                border: 1px solid #ddd;
                width: 350px;
                height: 40px;
                text-align: left;
            }

            .proxy {
                border: 1px solid #ccc;
                width: 80px;
                background: #fafafa;
            }

            .labeltitle {
                width: 200px;
                display: inline;
                padding: 5px;
            }

            .wrapper {
                padding: 10px;
                overflow: auto;
                position: relative;
            }

            .delete {
                position: absolute;
                right: 0;
                top: 0;
                cursor: pointer;
                background-image: url('/deng/view/workflow/form-design/Content/images/delb.png');
                height: 20px;
                width: 20px;
                background-size: 20px
            }
            .containerSelected {
                border: 3px dotted maroon;
            }
        </style>
        <script src="/deng/view/workflow/form-design/Scripts/Designer/Main.js"></script>
        <script type="text/javascript">
        function SetIdCount(id) {
            $("#mainContent").attr("tcount", id);
        }

        var url;
        var delist = [];
        function newHeBing() {
            $('#hbdygModal').modal({backdrop:'static',keyboard:false});
            $('#hbdygModal').modal({"backdrop":"static"}).modal('show').on("shown.bs.modal",function(){
                $("#zuo").val("0");
                $("#you").val("0");
                // 是弹出框居中。。。
                var $modal_dialog = $("#hbdygModalModalDialog");
                $modal_dialog.css({'width':reGetBodyWidth()*0.6+'px'});
            });
        }

        function execHb() {
            $('#fm').form('submit', {
                onSubmit: function (data) {
                    var ret = $(this).form('validate');
                    if (ret) {
                        try {
                            var left1 = parseInt( $("#zuo").val());
                            var you1 = parseInt($("#you").val());
                            if (left1 || you1) {
                                left1 = left1 || 0;
                                you1 = you1 || 0;
                                var tr1 = which.parent();
                                var index = tr1.find("td").index(which);
                                var b1 = index - left1;
                                var b2 = index + you1;
                                if (b1 < 0) { b1 = 0 };
                                for (var i = b1; i <= b2; i++){
                                    if (i != index) {
                                        tr1.find("td").eq(i).attr("ntdelete","1");
                                    }
                                }
                                tr1.find("td[ntdelete=1]").remove();
                                which.attr("colspan", b2 - b1 + 1);
                                $('#hbdygModal').modal('hide');
                            }else{
                                toastrBoot(4,"数据输入有误");
                            }
                        }catch (e){
                            console.log("异常--",e);
                        }
                    }else {

                    }
                    return false;
                },
                success: function (data) {
                   /*
                    $('#hbdygModal').modal('toggle');
                    $('#hbdygModal').modal('hide');
                    console.log("-----"+data)*/
                }
            });
        }
        </script>

        <script>
            function Fresh() {
                //表格和手风琴 往tab里放
                DropContainers('div[nttype="detables"],div[nttype="decolls"]', $(".tab-pane"))
                //表格 往手风琴里放
                DropContainers('div[nttype="detables"]', $(".panel-body"))
                //把控件往td里面拖拽
                DropEles($(".dragitem"), $('td.targetarea'))
                //3种组件往大框架里放
                DropContainers('div[nttype="detabs"],div[nttype="detables"],div[nttype="decolls"]', $("#mainContent"));
            }
            $(document).ready(function () {
                $("#btnLoadContent").click(function () {
                    $("#mainContent").html($('#ccContent').html());
                    Fresh();
                })
                jQuery.validator.addMethod("positiveinteger", function (value, element) {
                    var aint = parseInt(value);
                    return aint > 0 && (aint + "") == value;
                }, "请您输入正整数");

                $.contextMenu({
                    selector: "table[id^='t'] td,#abc td",//对Table中元素起效果
                    callback: function (key, options) {
                        if (key == "deleteHang") {
                            $(options.$trigger).parent().remove();
                        }else if (key == "deleteCell") {
                            $(options.$trigger).remove();
                        }else if (key == "deleteUpHang") {
                            $(options.$trigger).parent().prevAll().remove();
                        }else if (key == "deleteDownHang") {
                            $(options.$trigger).parent().nextAll().remove();
                        }else if (key == "approwup") { //在上面附加一行
                            var maliang = $(options.$trigger).parent();
                            var colone = maliang.clone();
                            colone.find("td").html("").removeClass().addClass("targetarea");
                            $(options.$trigger).parent().before(colone);
                            //把控件往td里面拖拽
                            DropEles($(".dragitem"), colone.find("td"))
                        }else if (key == "approwdown") { //在下面附加一行
                            var maliang = $(options.$trigger).parent();
                            var colone = maliang.clone();
                            colone.find("td").html("").removeClass().addClass("targetarea");
                            $(options.$trigger).parent().after(colone);
                            DropEles($(".dragitem"), colone.find("td"))
                        }else if (key == "hebing") {
                            //var caonima = $("<td class='targetarea' colspan='2'></td>");
                            //$(options.$trigger).parent().html(caonima)
                            if ($(options.$trigger).is("[colspan]")) {
                                toastrBoot(4,"不能合并");
                                return;
                            }
                            which = $(options.$trigger)
                            newHeBing();
                        }else if (key == "appcellleft") {
                            var td1 = $("<td  class='targetarea'></td>");
                            Drop(td1);
                            $(options.$trigger).before(td1)
                        } else if (key == "appcellright") {
                            var td1 = $("<td  class='targetarea'></td>");
                            Drop(td1);
                            $(options.$trigger).after(td1)
                        }else if (key == "appcolright") {//在右侧附加一列
                            var tr1 = $(options.$trigger).parent();
                            var aa = tr1.find("td").index($(options.$trigger));
                            var table1 = tr1.parent().parent().parent();
                            table1.find("tr").each(function (index, item) {
                                var td1 = $("<td  class='targetarea'></td>");
                                Drop(td1);
                                $(item).find("td").eq(aa).after(td1);
                            });
                        }else if (key == "appcolleft") { //在左侧附加一列
                            var tr1 = $(options.$trigger).parent();
                            var aa = tr1.find("td").index($(options.$trigger));
                            var table1 = tr1.parent().parent().parent();
                            table1.find("tr").each(function (index, item) {
                                var td1 = $("<td  class='targetarea'></td>");
                                Drop(td1);
                                $(item).find("td").eq(aa).before(td1);
                            });
                        }else if (key == "deleteLie") { //删除此列
                            var tr1 = $(options.$trigger).parent();
                            var aa = tr1.find("td").index($(options.$trigger));

                            var table1 = tr1.parent().parent().parent();
                            table1.find("tr").each(function (index, item) {
                                $(item).find("td").eq(aa).remove();
                            });
                        }  else if (key == "deleteLieLeft") {
                            var tr1 = $(options.$trigger).parent();
                            var aa = tr1.find("td").index($(options.$trigger));
                            var table1 = tr1.parent().parent().parent();
                            table1.find("tr").each(function (index, item) {
                                $(item).find("td:lt(" + aa+")").remove();
                            });
                        }else if (key == "deleteLieRight") {
                            var tr1 = $(options.$trigger).parent();
                            var aa = tr1.find("td").index($(options.$trigger));
                            var table1 = tr1.parent().parent().parent();
                            table1.find("tr").each(function (index, item) {
                                $(item).find("td:gt(" + aa + ")").remove();
                            });
                        }
                    },
                    items: {
                        "appcolright": {
                            name: "右侧附加一列",
                            icon: function () {
                                return 'fa fa-plus';
                            }
                        },
                        "appcolleft": {
                            name: "左侧附加一列",
                            icon: function () {
                                return 'fa fa-plus';
                            }
                        },
                        "appcellright": {
                            name: "右侧附加一格",
                            icon: function () {
                                return 'fa fa-plus';
                            }
                        },
                        "appcellleft": {
                            name: "左侧附加一格",
                            icon: function () {
                                return 'fa fa-plus';
                            }
                        },
                        "approwup": {
                            name: "上附加一行",
                            icon: function () {
                                return 'fa fa-plus';
                            }
                        },
                        "approwdown": {
                            name: "下侧附加一行",
                            icon: function () {
                                return 'fa fa-plus';
                            }
                        },
                        "sep1": "---------",
                        "deleteCell": {
                            name: "删除当前单元格",
                            icon: function () {
                                return 'fa fa-trash';
                            }
                        },
                        "deleteLie": {
                            name: "删除此列",
                            icon: function () {
                                return 'fa fa-trash';
                            }
                        },
                        "deleteLieLeft": {
                            name: "删除此列左侧全部列",
                            icon: function () {
                                return 'fa fa-trash';
                            }
                        },
                        "deleteLieRight": {
                            name: "删除此列右侧全部列",
                            icon: function () {
                                return 'fa fa-trash';
                            }
                        },
                        "deleteHang": {
                            name: "删除此行",
                            icon: function () {
                                return 'fa fa-trash';
                            }
                        },
                        "deleteUpHang": {
                            name: "删除此行以上所有行",
                            icon: function () {
                                return 'fa fa-trash';
                            }
                        },
                        "deleteDownHang": {
                            name: "删除此行以下所有行",
                            icon: function () {
                                return 'fa fa-trash';
                            }
                        },
                        "sep2": "---------",
                        "hebing": {
                            name: "合并单元格",
                            icon: function () {
                                return 'fa fa-file-text';
                            }
                        }
                    }
                });

                var current = null;
                $(document).on("click", "div[data-type]", function () {
                    if ($(this).attr("data-type") == "8") {
                        $(".delete").hide();
                        $(this).find(".delete").show();
                        var labelId = $(this).find("label").html();
                        var tb = $(this).find("table");
                        var tableName = $(this).find("table").attr("name");
                        var tableId = $(this).find("table").attr("id");
                        current = $(this);
                        $("#tabletitle").val(labelId);
                        $("#tablename").val(tableName);
                        $("#tableid").val(tableId);
                        $("#tableprops").find("tbody tr").remove();
                        tb.find("th").each(function (idx, itm) {
                            var filed = $(itm).attr("filed") || "";
                            $("#tableprops tbody").append("<tr><td>" + $(itm).html() + "</td><td>" + filed + "</td><td>  <button type='button' style='display:none' class='btn btn-secondary m-btn m-btn--custom m-btn--label-primary' aria-label='Left Align'><span class='fa fa-edit' aria-hidden='true'>编 辑</span></button> <button deletefld type='button' class='btn btn-secondary m-btn m-btn--custom m-btn--label-danger m-btn--bolder m-btn--uppercase' aria-label='Left Align'><span class='fa fa-trash-o' aria-hidden='true'  >删 除</span></button></td></tr>");
                        });
                        current = $(this);
                        $('#myModal').modal();
                    }else {
                        $(".delete").hide();
                        $(this).find(".delete").show();
                        $("#proptitle").val($(this).find("label").html());
                        $("#proptitleid").val($(this).find("label").attr("id"));
                        $("#proptitlename").val($(this).find("label").attr("name"));
                        $("#propname").val($(this).find("input,select,textarea").attr("name"));
                        $("#propid").val($(this).find("input,select,textarea").attr("id"));
                        $("#proplength").val($(this).find("input,select,textarea").css("width"));
                        $("#propheight").val($(this).find("input,select,textarea").css("height"));
                        $('#proptextalign').val($(this).parent().css("text-align"));
                        current = $(this);
                    }
                });
                $(document).on("click", "div.delete", function () {
                  var that=  $(this);
                    msgTishCallFnBoot("确定要删除吗？",function(){
                        that.parent().remove();
                    });
                });

                $("#tabitemTable1,#tableprops").on("click", "button[deletefld]", function () {
                    $(this).parent().parent().remove();
                });

                $("#tabitemTable1").on("click", "button[del]", function (event) {
                    delist.push($(this).parents("tr").data("id"));
                    $(this).parent().parent().remove();
                    event.preventDefault()

                });

                $("#tabitemTable1").on("click", "button[first]", function () {
                    if ($(this).parents('tr').is("#tabitemTable1 tbody tr:first")) {
                        toastrBoot(4,"已经在顶部");
                    }else {
                        var t = $(this).parents("tr").clone();
                        $(this).parents("tbody").prepend(t);
                        $(this).parents("tr").remove();
                    }
                });

                $("#tabitemTable1").on("click", "button[last]", function () {
                    if ($(this).parents("tr").is("#tabitemTable1 tbody tr:last")) {
                        toastrBoot(4,"已经在底部");
                    }else {
                        var t = $(this).parents("tr").clone();
                        $(this).parents("tbody").append(t);
                        $(this).parents("tr").remove();
                    }
                });

                $("#tabitemTable1").on("click", "button[up]", function () {
                    if ($(this).parents("tr").is("#tabitemTable1 tbody tr:first")) {
                        toastrBoot(4,"已经在顶部");
                    } else {
                        var t = $(this).parents("tr").clone();
                        $(this).parents("tr").prevAll("tr:first").before(t);
                        $(this).parents("tr").remove();

                    }
                });

                $("#tabitemTable1").on("click", "button[down]", function () {
                    if ($(this).parents("tr").is("#tabitemTable1 tbody tr:last")) {
                        toastrBoot(4,"已经在底部");
                    }else {
                        var t = $(this).parents("tr").clone();
                        $(this).parents("tr").next("tr").after(t);
                        $(this).parents("tr").remove();
                    }
                });

                $(document).on("click", "#abc td,table[id^='t'] td", function () {
                    $('td').removeClass("tdSelected")
                    $(this).addClass("tdSelected")
                });

                $("#btnSave").click(function () {
                    current.find("label").html($("#proptitle").val()).end()
                        .find("input,select,textarea").attr("name", $("#propname").val())
                        .css("width", $("#proplength").val())
                        .css("height", $("#propheight").val())
                        .attr("id", $("#propid").val()).end().
                        find("label").attr("name", $("#proptitlename").val())
                        .attr("id", $("#proptitleid").val()).end()
                        .parent().css("text-align", $("#proptextalign option:selected ").val())
                });

                $("#Button1").click(function () {
                    var h11 = $("#mainContent").html();
                    var id = getQueryString("id");
                    console.log(h11);
                });

                $('.dragitem').draggable({
                    revert: true,
                    deltaX: 10,
                    deltaY: 10,
                    proxy: function (source) {
                        var n = $('<div class="proxy"></div>');
                        n.html($(source).html()).appendTo('body');
                        return n;
                    }
                });
                var index1 = 0;
                Fresh();
                $("#btnReturn").click(function () {
                    window.location = "Main.aspx";
                });

                $("#btnNewFd").click(function () {
                    $('#newfiled').modal();
                });

                $("#filed").validate({
                    submitHandler: function (form) {
                        var data = {
                            'fldtitle': $("#fldtitle").val(),
                            'fldname': $("#fldname").val()
                        }
                        $("#tableprops tbody").append("<tr><td>" + data.fldtitle + "</td><td>" + data.fldname + "</td><td>  <button style='display:none' type='button' class='btn btn-secondary m-btn m-btn--custom m-btn--label-primary' aria-label='Left Align'><span class='fa fa-edit' aria-hidden='true'>编 辑</span></button> <button deletefld type='button' class='btn btn-secondary m-btn m-btn--custom m-btn--label-danger m-btn--bolder m-btn--uppercase' aria-label='Left Align'><span class='fa fa-trash-o' aria-hidden='true'  >删 除</span></button></td></tr>");
                        $('#newfiled').modal('hide')
                        $('#filed')[0].reset()
                    }
                });

                $("#formNew").validate({
                    submitHandler: function (form) {
                        current.find("label").html($("#tabletitle").val());
                        current.find("table").attr("name", $("#tablename").val());
                        current.find("table").attr("id", $("#tableid").val());
                        current.find("table tbody tr").remove();
                        current.find("table thead th").remove();
                        $("#tableprops tbody tr").each(function (index, item) {
                            current.find("table thead tr").append("<th filed='" + $(item).find("td:eq(1)").html()+"'>" + $(item).find("td:eq(0)").html() + "</th>");
                        });
                        $('#myModal').modal("hide");
                    }
                });
                //tab相关
                $("#buttonPlus").click(function () {
                    document.getElementById("tabitemform").reset();
                    $("#tabitem").modal();

                });

                $("#buttonPlus1").click(function () {
                    document.getElementById("tabitemform1").reset();
                    $("#tabitem1").modal();
                });

                $("#tabitemTable tbody").on('click', 'button[del]', function (e) {
                    $(this).parent().parent().remove();
                });
                $("#tabitemform").validate({
                    submitHandler: function (form) {
                        var tabitemtle = $("#tabitemtle").val();
                        $("#tabitemTable tbody").append("<tr><td>" + tabitemtle + '</td><td><button del="" type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-danger m-btn--bolder m-btn--uppercase" aria-label="Left Align"><span class="fa fa-trash-o" aria-hidden="true">删 除</span></button></td></tr>')
                        $("#tabitem").modal('hide');
                    }
                });
                $("#tabitemform1").validate({
                    submitHandler: function (form) {
                        var tabitemtle = $("#tabitemtle1").val();
                        var tr1 = $("<tr><td><input class='form-control' value='" + tabitemtle + "'/>" + "" + '</td><td><button del="" type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-danger m-btn--bolder m-btn--uppercase" aria-label="Left Align"><span class="fa fa-trash-o" aria-hidden="true">删 除</span></button><button first="" type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-primary" aria-label="Left Align"><span class="fa fa-compress" aria-hidden="true">置 顶</span></button><button last="" type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-warning" aria-label="Left Align"><span class="fa fa-expand" aria-hidden="true">置 底</span></button><button up="" type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-accent" aria-label="Left Align"><span class="fa fa-arrow-up" aria-hidden="true">上 移</span></button><button down="" type="button" class="btn btn-accent m-btn m-btn--custom" aria-label="Left Align"><span class="fa fa-angle-down" aria-hidden="true">下移</span></button></td></tr>');
                        var newid = GetNewId();
                        tr1.data("id", "tabtab" + newid)
                            .attr("data-id", "tabtab" + newid);

                        tr1.data("op", "add")
                            .attr("data-op", 'add');
                        $("#tabitemTable1 tbody").append(tr1);
                        $("#tabitem1").modal('hide');
                    }
                });

                $("#tabitemTablesubmit").click(function () {
                    var li1list = [];
                    var target1list = [];
                    var li1 = ' <li role="presentation" class="##1##"><a href="###id##" aria-controls="##id##" role="tab" data-toggle="tab">##title##</a></li>';
                    var target1 = '<div role="tabpanel" class=" min tab-pane ##1##" id="##id##"></div>'
                    $("#tabitemTable tbody td:even").each(function (index, item) {
                        var after = li1.replace(/##id##/g, 'tabtab' + index).replace(/##title##/g, $(item).html())
                        var after1 = target1.replace(/##id##/g, 'tabtab' + index)
                        if (index) {
                            after = after.replace("##1##", '')
                            after1 = after1.replace("##1##", '')
                        } else {
                            after = after.replace("##1##", 'active')
                            after1 = after1.replace("##1##", 'active')
                        }
                      li1list.push(after);
                      target1list.push(after1);
                    });
                    var lihtml = li1list.join("")
                    var targethtml = target1list.join("");
                    var des = ('<div><ul class="nav nav-tabs" data-usage=\"##4##\" role="tablist" id="tab' + GetNewId() + '">##1##</ul><div class="tab-content">##2## </div></div>').replace(/##1##/g, lihtml).replace(/##2##/, targethtml)
                    var tabsUsage = $("#tabsUsage").val();
                    des = des.replace(/##4##/g, tabsUsage);
                    $(currentTarget).html(des)
                    $("#detabsDia").modal("hide");
                    //DropContainers('div[nttype="detabs"],div[nttype="detables"],div[nttype="decolls"]', $('div[role="tabpanel"]'));
                    Fresh()
                    freshContainers();
                    return false;
                });
                $("#tabitemTablesubmit1").click(function () {
                    if (curentContainerType == "tablist") {
                        var tabsUsage1 = $("#tabsUsage1").val();
                        var trcontent = $("#tabitemTable1 tbody tr");
                        //删除导航
                        $(delist).each(function (idx, el) {
                            $(".containerSelected:first").find("a[href='" + el + "']").parents("li").remove();
                        });

                        //删除目标
                        $(delist.join(",")).remove();

                        //编辑和新建
                        $(".containerSelected:first").find("li").remove();
                        $(trcontent).each(function (idx, el) {
                            var newid = GetNewId();
                            var li1 = "";
                            if ($(el).data("op") == "add") {
                                li1 = ' <li role="presentation"><a href="###id##" aria-controls="###id##" role="tab" data-toggle="tab">##title##</a></li>'
                                    .replace(/##title##/g, $(el).find("td:first input").val())
                                    .replace(/##id##/g, "tabtab" + newid);

                                var d1 = $("<div role='tabpanel' class='min tab-pane  droppable'></div>")
                                d1.attr("id", "tabtab" + newid);
                                $(".containerSelected:eq(1)").append(d1);
                            }else if ($(el).data("op") == "update") {
                                li1 = '<li role="presentation"><a href="##id##" aria-controls="##id##" role="tab" data-toggle="tab">##title##</a></li>'
                                    .replace(/##title##/g, $(el).find("td:first input").val())
                                    .replace(/##id##/g, $(el).data("id"));
                            }
                            $(".containerSelected:first").append(li1)
                        });
                        $(".containerSelected:first").data("usage", tabsUsage1).attr("data-usage", tabsUsage1)
                        $("#detabsDia1").modal("hide");
                        $(".containerSelected:first").find("li:first a").click();
                        Fresh();
                        return false;
                    } else if (curentContainerType == "acclist") {
                        var tabsUsage1 = $("#tabsUsage1").val();
                        var trcontent = $("#tabitemTable1 tbody tr");
                        //删除目标
                        $(delist).each(function (idx, el) {
                           $(".containerSelected").find("#" + el).parent().remove();
                        });
                        //编辑和新建
                        $(".containerSelected:first").find("li").remove();
                        $(trcontent).each(function (idx, el) {
                            if ($(el).data("op") == "add") {
                                var target1 = '<div class="panel panel-default"><div class="panel-heading" role="tab" id="##1##"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="###2##" aria-expanded="true" aria-controls="collapseOne">                    ##3##</a></h4></div><div id="##2##" class="panel-collapse collapse ##4##" role="tabpanel" aria-labelledby="##1##"><div class="panel-body min"></div></div></div>'
                                var newid = GetNewId();
                                target1 = target1.replace(/##1##/g, "header" + newid + "1")
                                    .replace(/##2##/g, "content" + newid + "1").
                                    replace(/##3##/g, $(el).find("td:first input").val());
                                target1 = target1.replace(/##4##/g, '')
                                $(".containerSelected").append(target1);
                            } else if ($(el).data("op") == "update") {
                                $("#" + $(el).data("id")).find("a").html($(el).find("td:first input").val());
                                var org = $("#" + $(el).data("id")).parent();
                                $(".containerSelected").append(org.clone());
                                org.remove();
                            }
                        });
                        $(".containerSelected:first").data("usage", tabsUsage1)
                        $("#detabsDia1").modal("hide");
                        $(".containerSelected:first").find("li:first a").click();
                        Fresh();
                        return false;
                    }
                });

                //coll相关
                $("#buttonPlusCol").click(function () {
                    document.getElementById("collitemform").reset();
                    $("#collsitem").modal();
                });
                $("#collitemcollle tbody").on('click', 'button[del]', function (e) {
                    $(this).parent().parent().remove();
                });

                $("#collitemform").validate({
                    submitHandler: function (form) {
                        var collitemtle = $("#collitemtle").val();
                        $("#collitemTable tbody").append("<tr><td>" + collitemtle + '</td><td><button del="" type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-danger m-btn--bolder m-btn--uppercase" aria-label="Left Align"><span class="fa fa-trash-o" aria-hidden="true">删 除</span></button></td></tr>')
                        $("#collsitem").modal('hide');
                    }
                });

                $("#collitemcolllesubmit").click(function () {
                    var nid = GetNewId();
                    var li1list = [];
                    var target1list = [];
                    $("#collitemTable tbody td:even").each(function (index, item) {
                        var target1 = '<div class="panel panel-default"><div class="panel-heading" role="tab" id="##1##"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion' + nid+'" href="###2##" aria-expanded="true" aria-controls="collapseOne">                    ##3##</a></h4></div><div id="##2##" class="panel-collapse collapse ##4##" role="tabpanel" aria-labelledby="##1##"><div class="panel-body min"></div></div></div>'
                        var newid = GetNewId();
                        target1 = target1.replace(/##1##/g, "header" + newid + index.toString())
                            .replace(/##2##/g, "content" + newid + index.toString()).
                            replace(/##3##/g, $(item).html());
                        if (index === 0) {
                            target1 = target1.replace(/##4##/g, 'in')
                        }else {
                            target1 = target1.replace(/##4##/g, '')
                        }
                        target1list.push(target1);
                    });
                    var targethtml = target1list.join("");
                    //var newid = parseInt($('#mainContent').attr("tcount")) + 1;

                    var des = '<div class="panel-group" data-usage=\"##4##\" id="accordion' + nid  + '" role="acclist" aria-multiselectable="true">' + targethtml + '</div>';
                    var navsUsage = $("#navsUsage").val();
                    des = des.replace(/##4##/g, navsUsage);
                    $(currentTarget).html(des);
                    $("#decollsDia").modal("hide");
                    Fresh();
                    freshContainers();
                    return false;
                });

                //tables相关
                $("#itemform").validate({
                    submitHandler: function (form) {
                        var formtle = $('#itemtle').val()
                        var formhang = parseInt( $('#itemhang').val())
                        var formlie = parseInt($('#itemlie').val());
                        var formusage = $("#tableUsage").val();
                        ///
                        var des = "";
                        des += "<table role='table' class=\"desigerTable\" data-usage=\"##7##\" id=\"t##4##\"  cellpadding=\"10\" cellspacing=\"10\" ><thead><tr><th  colspan=\"##0##\">##1##</th></thead></tr><tbody>##2##</tbody></table>";
                        des = des.replace(/##0##/g, formlie.toString());
                        des = des.replace(/##1##/g, formtle);
                        var newid = GetNewId();
                        des = des.replace(/##4##/g, newid);
                        des = des.replace(/##7##/g, formusage);
                        var listtr = [];
                        for (i = 0; i < formhang; i++) {
                            var listtd = [];
                            for (j = 0; j < formlie; j++) {
                                listtd.push("<td class=\" targetarea\"></td>");
                            }
                            listtr.push("<tr>"+listtd.join("")+"</tr>");
                        }
                        des = des.replace(/##2##/g, listtr.join(""));
                        $(currentTarget).html(des);
                        Fresh();
                        freshContainers();
                        $('#detablesDia').modal('hide');
                    }
                })
                $("#formtablepors").validate({
                    submitHandler: function (form) {
                        var tableTltPorps = $("#tableTltPorps").val();
                        var tableUsagePorps = $("#tableUsagePorps").val();
                        $(".containerSelected").attr("data-usage", tableUsagePorps)
                            .data("usage", tableUsagePorps)
                            .find("th").html(tableTltPorps);
                        $("#tablenewprops").modal("hide");
                        freshContainers();
                    }
                });
                $("#Select1").change(function () {
                    $(".containerSelected").removeClass("containerSelected");
                    var sid = $(this).find("option:selected").val();
                    if ($(this).attr("role") == "acclist") {
                        $("#" + sid).addClass('containerSelected')
                    }else {
                        $("#" + sid).next().addClass("containerSelected").end().addClass('containerSelected')

                    }
                });
                freshContainers();
                $("#deleteContainer").click(function () {
                    if ($(".containerSelected").length == 0) {
                    }else {
                        msgTishCallFnBoot("您确定要删除吗？",function(){
                            $(".containerSelected").remove();
                            freshContainers();
                            $("#Button1").click();
                        });
                    }
                });
                $("#editContainer").click(function () {
                    delist = [];
                    if ($(".containerSelected").length == 0) {

                    }else {
                       var role1= $(".containerSelected").attr("role")
                       if (role1 == "table") {
                           var usage = $(".containerSelected").data("usage")
                           var ht = $(".containerSelected").find("th").html();
                           $("#tableTltPorps").val(ht);
                           $("#tableUsagePorps").val(usage);
                           $("#tablenewprops").modal();
                       } else if (role1 == "tablist") {
                           $("#tabsUsage1").val($(".containerSelected:first").data("usage"));
                           $("#tabitemTable1").find("tbody").children().remove();
                           $(".containerSelected:first").find("li").each(function (idx, el) {
                               var tr1 = $("<tr><td><input class='form-control' value='" + $(el).find("a").html() + "'/>" + "" + '</td><td><button del="" type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-danger" aria-label="Left Align"><span class="fa fa-trash-o" aria-hidden="true">删 除</span></button><button first="" type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-primary" aria-label="Left Align"><span class="fa fa-compress" aria-hidden="true">置 顶</span></button><button last="" type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-warning" aria-label="Left Align"><span class="fa fa-expand" aria-hidden="true">置 底</span></button><button up="" type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-accent" aria-label="Left Align"><span class="fa fa-arrow-up" aria-hidden="true">上 移</span></button><button down="" type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-info" aria-label="Left Align"><span class="fa fa-angle-down" aria-hidden="true">下 移</span></button></td></tr>');
                               tr1.data("id", $(el).find("a").attr("href"))
                                   .attr("data-id", $(el).find("a").attr("href"));
                               tr1.data("op", "update")
                                   .attr("data-op", "update")
                               $("#tabitemTable1").find("tbody").append(tr1);
                           });
                           curentContainerType = "tablist";
                           $("#detabsDia1").modal();
                       }else if (role1 == "acclist") {
                           //编辑acc嘛
                           curentContainerType = "acclist";
                           $("#tabsUsage1").val($(".containerSelected").data("usage"));
                           $("#tabitemTable1").find("tbody").children().remove();
                           $(".containerSelected>div").each(function (idx, el) {
                               var tr1 = $("<tr><td><input class='form-control' value='" + $(el).find(">div:first a").html().trim() + "'/>" + "" + '</td><td><button del="" type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-danger" aria-label="Left Align"><span class="fa fa-trash-o" aria-hidden="true">删 除</span></button><button first="" type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-primary" aria-label="Left Align"><span class="fa fa-compress" aria-hidden="true">置 顶</span></button><button last="" type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-warning" aria-label="Left Align"><span class="fa fa-expand" aria-hidden="true">置 底</span></button><button up="" type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-accent" aria-label="Left Align"><span class="fa fa-arrow-up" aria-hidden="true">上 移</span></button><button down="" type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-info" aria-label="Left Align"><span class="fa fa-angle-down" aria-hidden="true">下 移</span></button></td></tr>');
                               tr1.data("id", $(el).find(">div:first").attr("id")).attr("data-id", $(el).find(">div:first").attr("id"));
                               tr1.data("op", "update").attr("data-op", "update")
                               $("#tabitemTable1").find("tbody").append(tr1);
                           });
                           $("#detabsDia1").modal();
                       }
                    }
                });
            })
        </script>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">编辑表格属性</h4>
                    </div>
                    <form class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed" id="formNew">
                        <div class="m-portlet__body">
                            <div class="form-group m-form__group row">
                                <label for="a1" class="col-md-1 col-form-label">标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题</label>
                                <div class="col-md-3">
                                    <input required class="form-control" name="tabletitle" id="tabletitle" placeholder="此项为表格标题">
                                </div>
                                <label for="a2" class="col-md-1 col-form-label">名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称</label>
                                <div class="col-md-3">
                                    <input required name="tablename" class="form-control" id="tablename" placeholder="此项为表格name属性">
                                </div>
                                <label for="a3" class="col-md-1 col-form-label">编&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</label>
                                <div class="col-md-3">
                                    <input required class="form-control" name="tableid" id="tableid" placeholder="此项为表格id属性">
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <label for="a3" class="col-md-1 col-form-label">操作</label>
                                <div class="col-md-6">
                                    <button type="button" class="btn btn-default  btn-toolbar" id="btnNewFd">
                                        <span class="fa fa-plus" aria-hidden="true"></span> 新建字段
                                    </button>
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <label for="a3" class="col-md-1 col-form-label">控件</label>
                                <div class="col-md-11" style="height:150px;overflow:auto">
                                    <table class="table" id="tableprops" name="tableprops">
                                        <thead>
                                            <tr>
                                                <th>中文标题</th>
                                                <th>数据库字段</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1111111111111</td>
                                                <td>22222222222222</td>
                                                <td>
                                                    <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-primary" aria-label="Left Align">
                                                        <span class="fa fa-edit" aria-hidden="true">编 辑</span>
                                                    </button> <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-danger" aria-label="Left Align">
                                                        <span class="fa fa-trash-o" aria-hidden="true">删 除</span>
                                                    </button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>1111111111111</td>
                                                <td>22222222222222</td>
                                                <td>
                                                    <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-primary" aria-label="Left Align">
                                                        <span class="fa fa-edit" aria-hidden="true">编 辑</span>
                                                    </button> <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-danger" aria-label="Left Align">
                                                        <span class="fa fa-trash-o" aria-hidden="true">
                                                            删 除
                                                        </span>
                                                    </button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>1111111111111</td>
                                                <td>22222222222222</td>
                                                <td>
                                                    <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-primary" aria-label="Left Align">
                                                        <span class="fa fa-edit" aria-hidden="true">编 辑</span>
                                                    </button> <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-danger" aria-label="Left Align">
                                                        <span class="fa fa-trash-o" aria-hidden="true">删 除</span>
                                                    </button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>1111111111111</td>
                                                <td>22222222222222</td>
                                                <td>
                                                    <button type="button" class="btn btn-primary btn-xs" aria-label="Left Align">
                                                        <span class="fa fa-edit" aria-hidden="true">编 辑</span>
                                                    </button>
                                                    <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--label-danger" aria-label="Left Align">
                                                        <span class="fa fa-trash-o" aria-hidden="true">删 除</span>
                                                    </button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--icon" data-dismiss="modal">关 闭</button>
                            <input type="submit" class="btn btn-success m-btn m-btn--custom m-btn--bolder m-btn--uppercase" id="btnSaveTable" value="保存表格" />
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="modal" id="newfiled" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="background: #2B81AF">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">编辑字段属性</h4>
                    </div>
                    <form class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed" id="filed">
                        <div class="m-portlet__body" style="background: #99cc99">
                            <div class="form-group m-form__group row">
                                <label for="a1" class="col-md-3 col-form-label">中文标题</label>
                                <div class="col-md-8">
                                    <input required id="fldtitle" name="fldtitle" class="form-control" placeholder="中文标题">
                                </div>
                            </div>

                            <div class="form-group m-form__group row">
                                <label for="a2" class="col-md-3 col-form-label">字&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;段</label>
                                <div class="col-md-8">
                                    <input required name="fldname" id="fldname" class="form-control" placeholder="标题对应数据库字段">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer" style="background: #0a001f">
                            <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--icon" data-dismiss="modal">关 闭</button>
                            <input type="submit" class="btn btn-success m-btn m-btn--custom m-btn--bolder m-btn--uppercase" value="保存字段" />
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="modal fade" id="detablesDia" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">新建表格</h4>
                    </div>
                    <form class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed" id="itemform">
                        <div class="m-portlet__body">
                            <div class="form-group m-form__group row">
                                <label for="a1" class="col-md-3 col-form-label">表格信息</label>
                                <div class="col-md-6">
                                    <input required class="form-control" name="tableUsage" id="tableUsage" placeholder="表格信息">
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <label for="a1" class="col-md-3 col-form-label">表格标题</label>
                                <div class="col-md-6">
                                    <input required class="form-control" name="itemtle" id="itemtle" placeholder="表格标题">
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <label for="a2" class="col-md-3 col-form-label">行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数</label>
                                <div class="col-md-6">
                                    <input required name="itemhang" positiveinteger="true" class="form-control" id="itemhang" placeholder="行数" style="width: 120px;">
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <label for="a3" class="col-md-3 col-form-label">列&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数</label>
                                <div class="col-md-6">
                                    <input required positiveinteger="true" class="form-control" name="itemlie" id="itemlie" placeholder="行数" style="width: 120px;">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--icon" data-dismiss="modal">关 闭</button>
                            <input type="submit" class="btn btn-success m-btn m-btn--custom m-btn--bolder m-btn--uppercase" value="保 存" />
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="modal fade" id="detabsDia" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="overflow:auto">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">新建选项卡</h4>
                    </div>
                    <form class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed" id="detabsInsert">
                        <div class="modal-body">
                            <div class="form-group m-form__group row">
                                <label for="a1" class="col-md-3 col-form-label">用&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;途</label>
                                <div class="col-md-6">
                                    <input required class="form-control" id="tabsUsage" name="tabsUsage" placeholder="选项卡用途">
                                </div>
                            </div>
                            <div class="form-group m-form__group row" id="divTabPlus">
                                <label for="a3" class="col-md-3 col-form-label">操&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;作</label>
                                <div class="col-md-6">
                                    <button type="button" id="buttonPlus" class="btn btn-default  btn-toolbar">
                                        <span class="fa fa-plus" aria-hidden="true"></span>
                                    </button>
                                </div>
                            </div>
                            <div class="form-group m-form__group row" id="divTabs">
                                <label for="a3" class="col-md-3 col-form-label">标题列表</label>
                                <div class="col-md-9" style="height:130px; overflow:auto">
                                    <table id="tabitemTable" class="table table-bordered table-condensed table-hover  table-striped">
                                        <thead>
                                            <tr>
                                                <th>名称</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                            <input id="Hidden1" type="hidden" />
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--icon" data-dismiss="modal">关 闭</button>
                            <input type="submit" class="btn btn-success m-btn m-btn--custom m-btn--bolder m-btn--uppercase" id="tabitemTablesubmit" value="保 存" />
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="modal fade" id="tabitem" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="background: #1b6d85">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel2">新建选项卡条目</h4>
                    </div>
                    <form class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed" id="tabitemform">
                        <div class="m-portlet__body" style="background: #00aff0">
                            <div class="form-group m-form__group row">
                                <label for="a1" class="col-md-2 col-form-label">标 题</label>
                                <div class="col-md-6">
                                    <input required class="form-control" name="tabitemtle" id="tabitemtle" placeholder="选项卡Tab标题">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer" style="background: #5A5CAD">
                            <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--icon" data-dismiss="modal">关 闭</button>
                            <input type="submit" class="btn btn-success m-btn m-btn--custom m-btn--bolder m-btn--uppercase" value="保 存" />
                        </div>
                    </form>
                </div>
            </div>
        </div>


        <div class="modal fade" id="decollsDia" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="overflow:auto">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">新建手风琴</h4>
                    </div>
                    <form class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed" id="decollsInsert">
                        <div class="m-portlet__body">
                            <div class="form-group m-form__group row">
                                <label for="a1" class="col-md-3 col-form-label">用&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;途</label>
                                <div class="col-md-9">
                                    <input required class="form-control" id="navsUsage" name="navsUsage" placeholder="手风琴用途">
                                </div>
                            </div>
                            <div class="form-group m-form__group row" id="divCollPlus">
                                <label for="a3" class="col-md-3 col-form-label">操&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;作</label>
                                <div class="col-md-9">
                                    <button type="button" id="buttonPlusCol" class="btn btn-default  btn-toolbar">
                                        <span class="fa fa-plus" aria-hidden="true"></span>
                                    </button>
                                </div>
                            </div>
                            <div class="form-group m-form__group row" id="divColls">
                                <label for="a3" class="col-md-3 col-form-label">标题列表</label>
                                <div class="col-md-9" style="height:130px; overflow:auto">
                                    <table id="collitemTable" class="table table-bordered table-condensed table-hover  table-striped">
                                        <thead>
                                            <tr>
                                                <th>名称</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--icon" data-dismiss="modal">关 闭</button>
                            <input type="submit" class="btn btn-success m-btn m-btn--custom m-btn--bolder m-btn--uppercase" id="collitemcolllesubmit" value="保 存" />
                        </div>
                    </form>
                </div>
            </div>
        </div>


        <div class="modal fade" id="collsitem" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">新建手风琴条目</h4>
                    </div>
                    <form class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed" id="collitemform">
                        <div class="m-portlet__body">
                            <div class="form-group m-form__group row">
                                <label for="a1" class="col-md-2 col-form-label">标 题</label>
                                <div class="col-md-6">
                                    <input required class="form-control" name="tabitemtle" id="collitemtle" placeholder="条目标题">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--icon" data-dismiss="modal">关 闭</button>
                            <input type="submit" class="btn btn-success m-btn m-btn--custom m-btn--bolder m-btn--uppercase" value="保 存" />
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!--属性编辑框-->
        <div class="modal fade" id="tablenewprops" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">编辑表格</h4>
                    </div>
                    <form class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed" id="formtablepors">
                        <div class="m-portlet__body">
                            <div class="form-group m-form__group row">
                                <label for="a1" class="col-md-3 col-form-label">表格用途</label>
                                <div class="col-md-3">
                                    <input required class="form-control" name="tableUsagePorps" id="tableUsagePorps" placeholder="表格用途">
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <label for="a1" class="col-md-3 col-form-label">表格标题</label>
                                <div class="col-md-3">
                                    <input required class="form-control" name="tableTltPorps" id="tableTltPorps" placeholder="表格标题">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--icon" data-dismiss="modal">关 闭</button>
                            <input type="submit" class="btn btn-success m-btn m-btn--custom m-btn--bolder m-btn--uppercase" value="保 存" />
                        </div>
                    </form>
                </div>
            </div>
        </div>


        <div class="modal fade" id="detabsDia1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="overflow:auto">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">编辑选项卡</h4>
                    </div>
                    <form class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed" id="detabsInsert1">
                        <div class="m-portlet__body">
                            <div class="form-group m-form__group row">
                                <label for="a1" class="col-md-2 col-form-label">用&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;途</label>
                                <div class="col-md-6">
                                    <input required class="form-control" id="tabsUsage1" name="tabsUsage" placeholder="选项卡用途">
                                </div>
                            </div>
                            <div class="form-group m-form__group row" id="divTabPlus1">
                                <label for="a3" class="col-md-2 col-form-label">操&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;作</label>
                                <div class="col-md-2">
                                    <button type="button" id="buttonPlus1" class="btn btn-default  btn-toolbar">
                                        <span class="fa fa-plus" aria-hidden="true"></span>
                                    </button>
                                </div>
                            </div>
                            <div class="form-group m-form__group row" id="divTabs1">
                                <label for="a3" class="col-md-2 col-form-label">标题列表</label>
                                <div class="col-md-10" style="height:130px; overflow:auto">
                                    <table id="tabitemTable1" class="table table-bordered table-condensed table-hover  table-striped">
                                        <thead>
                                            <tr>
                                                <th>名称</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                            <input id="Hidden11" type="hidden" />
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--icon" data-dismiss="modal">关 闭</button>
                            <input type="submit" class="btn btn-success m-btn m-btn--custom m-btn--bolder m-btn--uppercase" id="tabitemTablesubmit1" value="保 存" />
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="modal fade" id="tabitem1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel21">新建选项卡条目</h4>
                    </div>
                    <form class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed" id="tabitemform1">
                        <div class="m-portlet__body">
                            <div class="form-group m-form__group row">
                                <label for="a1" class="col-md-2 col-form-label">标 题</label>
                                <div class="col-md-6">
                                    <input required class="form-control" name="tabitemtle1" id="tabitemtle1" placeholder="条目标题">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--icon" data-dismiss="modal">关 闭</button>
                            <input type="submit" class="btn btn-success m-btn m-btn--custom m-btn--bolder m-btn--uppercase" value="保 存" />
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 编辑属性模态框（Modal）开始 -->
        <div class="modal fade" id="formAttrModal" tabindex="-1" role="dialog" aria-labelledby="formAttrModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" id="formAttrModalDialog">
                <div class="modal-content">
                    <div class="modal-header" style="display: none;">
                        <h4 class="modal-title" id="formAttrModalLabel">
                            编辑属性
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="m-portlet__body" id="PanelBody">
                            <div class="form-group m-form__group row">
                                <label class="col-lg-2 col-form-label">标题名称</label>
                                <div class="col-lg-4">
                                    <input class="form-control" id="proptitle" type="text" />
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <label class="col-lg-2 col-form-label">标题id</label>
                                <div class="col-lg-4">
                                    <input class="form-control" id="proptitleid" type="text" >
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <label class="col-lg-2 col-form-label">标题name</label>
                                <div class="col-lg-4">
                                    <input class="form-control" id="proptitlename" type="text"/>
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <label class="col-lg-2 col-form-label">标签id</label>
                                <div class="col-lg-4">
                                    <input class="form-control" id="propid" type="text"/>
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <label class="col-lg-2 col-form-label">标签name</label>
                                <div class="col-lg-4">
                                    <input class="form-control" id="propname" type="text"/>
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <label class="col-lg-2 col-form-label">长度</label>
                                <div class="col-lg-4">
                                    <input class="form-control" id="proplength" type="text" style="width:130px" />
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <label class="col-lg-2 col-form-label">对其方式</label>
                                <div class="col-lg-4">
                                    <select  class="form-control" id="proptextalign" style="width:130px">
                                        <option value="left">偏左</option>
                                        <option value="right">偏右</option>
                                        <option value="center">居中</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <label class="col-lg-2 col-form-label">高度</label>
                                <div class="col-lg-4">
                                    <input class="form-control" id="propheight" type="text" style="width:130px" />
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <label class="col-lg-2 col-form-label">是否可编辑</label>
                                <div class="col-lg-4">
                                    <select class="form-control"  style="width:130px" id="propedit">
                                        <option value="disabled">是</option>
                                        <option>否</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <label class="col-lg-2 col-form-label">是否隐藏</label>
                                <div class="col-lg-4">
                                    <select class="form-control" style="width:130px">
                                        <option>是</option>
                                        <option selected>否</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success m-btn m-btn--custom" id="btnSave">
                            <span class="fa fa-check" aria-hidden="true">确 认</span>
                        </button>
                        <!--
                        &nbsp;
                        <button type="button" class="btn btn-danger m-btn m-btn&#45;&#45;custom m-btn&#45;&#45;bolder m-btn&#45;&#45;uppercase" id="btnSave">
                            <span class="fa fa-remove" aria-hidden="true">取 消</span>
                        </button>
                        -->
                        <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--icon" data-dismiss="modal">关 闭</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
        <!-- 编辑属性模态框（Modal）结束 -->

        <!-- 源代码模态框（Modal）开始 -->
        <div class="modal fade" id="codingModal" tabindex="-1" role="dialog" aria-labelledby="codingModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" id="codingModalDialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="codingModalLabel">
                            源代码
                        </h4>
                    </div>
                    <div class="modal-body">
                        <textarea  id="editor" name="editor" class="form-control" style="width: 100%;" rows="20"></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--icon" data-dismiss="modal">关闭</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
        <!-- 源代码模态框（Modal）结束 -->
        <div id="ccContent" style="display:none"><div><ul class="nav nav-tabs" data-usage="请假单制定" role="tablist" id="tab3"> <li role="presentation" class="active"><a href="#tabtab0" aria-controls="tabtab0" role="tab" data-toggle="tab" aria-expanded="true">基本信息</a></li> <li role="presentation" class=""><a href="#tabtab1" aria-controls="tabtab1" role="tab" data-toggle="tab" aria-expanded="false">&nbsp;&nbsp;&nbsp;&nbsp;附件</a></li></ul><div class="tab-content"><div role="tabpanel" class="min tab-pane droppable active" id="tabtab0"><table role="table" class="desigerTable" data-usage="请假单录入" id="t5" cellpadding="10" cellspacing="10"><thead><tr><th colspan="4">请假单录入</th></tr></thead><tbody><tr><td class="targetarea droppable" style="border: 1px solid rgb(221, 221, 221); text-align: left;"><div data-type="1" class="wrapper"><div class="delete" style="display: none;"></div><div class="form-group"><div><label style="margin-top:10px" class="col-sm-4 control-label" for="nt6" name="" id="">姓名</label><div class="col-sm-8"><input class="form-control" placeholder="" id="nt6" name="nt6" type="text" style="width: 138px; height: 34px;"></div></div></div></div></td><td class="targetarea droppable" style="border: 1px solid rgb(221, 221, 221);"><div data-type="4" class="wrapper"><div class="delete" style=""></div><div class="form-group"><div><label style="margin-top:10px" class="col-sm-4 control-label">请选择</label><div class="col-sm-8"><select class="form-control" id="nt8" name="nt8"><option>请选择...</option></select></div></div></div></div></td><td class="targetarea droppable" style="border: 1px solid rgb(221, 221, 221);"></td><td class="targetarea droppable" style="border: 1px solid rgb(221, 221, 221);"><div data-type="3" class="wrapper"><div class="delete" style="display:none"></div><div class="form-group"><div><label style="margin-top:10px" class="col-sm-4 control-label" for="nt12">请选择日期</label><div class="col-sm-8"><input class="form-control" placeholder="这里是日期控件" id="nt12" name="nt12" type="text"></div></div></div></div></td></tr><tr><td class="targetarea droppable" style="border: 1px solid rgb(221, 221, 221);"><div data-type="3" class="wrapper"><div class="delete" style="display:none"></div><div class="form-group"><div><label style="margin-top:10px" class="col-sm-4 control-label" for="nt14">请选择日期</label><div class="col-sm-8"><input class="form-control" placeholder="这里是日期控件" id="nt14" name="nt14" type="text"></div></div></div></div></td><td class="targetarea droppable tdSelected"></td><td class="targetarea droppable" style="border: 1px solid rgb(221, 221, 221);"></td><td class="targetarea droppable"></td></tr><tr><td class="targetarea droppable" style="border: 1px solid rgb(221, 221, 221);"></td><td class="targetarea droppable" style="border: 1px solid rgb(221, 221, 221);"></td><td class="targetarea droppable" style="border: 1px solid rgb(221, 221, 221);"></td><td class="targetarea droppable"></td></tr><tr><td class="targetarea droppable"></td><td class="targetarea droppable" style="border: 1px solid rgb(221, 221, 221);"></td><td class="targetarea droppable"></td><td class="targetarea droppable"></td></tr><tr><td class="targetarea droppable" style="border: 1px solid rgb(221, 221, 221);"></td><td class="targetarea droppable"></td><td class="targetarea droppable"></td><td class="targetarea droppable"></td></tr><tr><td class="targetarea droppable"></td><td class="targetarea droppable"></td><td class="targetarea droppable"></td><td class="targetarea droppable"></td></tr><tr><td class="targetarea droppable"></td><td class="targetarea droppable"></td><td class="targetarea droppable"></td><td class="targetarea droppable"></td></tr><tr><td class="targetarea droppable"></td><td class="targetarea droppable"></td><td class="targetarea droppable"></td><td class="targetarea droppable"></td></tr><tr><td class="targetarea droppable"></td><td class="targetarea droppable"></td><td class="targetarea droppable"></td><td class="targetarea droppable"></td></tr><tr><td class="targetarea droppable"></td><td class="targetarea droppable"></td><td class="targetarea droppable"></td><td class="targetarea droppable"></td></tr></tbody></table></div><div role="tabpanel" class="min tab-pane  droppable" id="tabtab1"></div> </div></div></div>
        </div>
</body>
</html>

<script>
    function formAttrEdit(){
        $('#formAttrModal').modal({backdrop:'static',keyboard:false});
        $('#formAttrModal').modal({"backdrop":"static"}).modal('show').on("shown.bs.modal",function(){
            // 是弹出框居中。。。
            var $modal_dialog = $("#formAttrModalDialog");
            $modal_dialog.css({'width':reGetBodyWidth()*0.6+'px'});
        });
    }

    function preview() {

    }

    var editor;
    function codingShow(){
        var SourcesModalCount = 0 ;
        $('#codingModal').modal({backdrop:'static',keyboard:false});
        $('#codingModal').modal({"backdrop":"static"}).modal('show').on("shown.bs.modal",function(){
            if(++SourcesModalCount == 1){
                // 是弹出框居中。。。
                var $modal_dialog = $("#codingModalDialog");
                $modal_dialog.css({'width':reGetBodyWidth()*0.6+'px'});
                var mainContent = $("#mainContent").html();
                //调用格式化
                if(null == editor){
                    $("#editor").val(mainContent)
                    editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
                        mode: "text/html",
                        extraKeys: {"Ctrl-Space": "autocomplete"},
                        lineNumbers:true
                    });
                }
                editor.getDoc().setValue(mainContent);
                editor.refresh();
                CodeMirror.commands["selectAll"](editor);//选择所有
                var range = getSelectedRange(editor);
                editor.autoFormatRange(range.from, range.to);
            }
        });
    }


    function getSelectedRange(editor) {
        return { from: editor.getCursor(true), to: editor.getCursor(false) };
    }

    /**
     * 注释代码
     * @param editor
     * @param isComment true是 false取消
     */
    function commentSelection(editor,isComment) {
        var range = getSelectedRange();
        editor.commentRange(isComment, range.from, range.to);
    }
</script>
